<template>
  <Modal v-model="isShow" :title="modalTitle" width="700" :mask-closable="false" :closable="false">
    <Form :model="formItem" :label-width="100">
      <FormItem label="活动主题" prop="activity_theme">
        <!--<Select v-model="formItem.plan_id">
          <Option v-for="item in PlanList" :value="item.id" :key="item.id">{{ item.activity_theme }}</Option>
        </Select>-->
        <Input v-model="formItem.activity_theme" disabled></Input>
      </FormItem>
      <FormItem label="活动时间" prop="activity_time">
        <DatePicker class="timeStyle" v-model="formItem.activity_time" type="datetime" format="yyyy-MM-dd HH:mm"
                    placeholder="请选择日期时间"></DatePicker>
      </FormItem>
      <FormItem label="活动地点" prop="activity_place">
        <Input v-model="formItem.activity_place" placeholder="请输入活动地点"></Input>
      </FormItem>
      <FormItem label="活动措施" prop="emergency_measure">
        <Input v-model="formItem.emergency_measure" placeholder="请输入应急措施"></Input>
      </FormItem>
      <FormItem label="参与人员范围" prop="activity_object">
        <Select v-model="formItem.activity_object" multiple>
          <Option v-for="item in PersonList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem label="活动策划流程" prop="activity_flow">
        <Input v-model="formItem.activity_flow" type="textarea" :rows="4"></Input>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button type="error" @click="cancel">取消</Button>
      <Button type="success" @click="saveHandle" :loading="btnLoading">保存</Button>
    </div>
  </Modal>
</template>

<script>
import { addEditActivityPlanning } from '@/api/activityPlanning'
import { getActivityPlanList } from '@/api/activity'

export default {
  name: 'PlotOptionAdd',
  props: {
    isShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    modalTitle: {
      type: String,
      default: () => {
        return false
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rowId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      PersonList: [
        {
          value: '10-20岁人群',
          label: '10-20岁人群'
        },
        {
          value: '20-30岁人群',
          label: '20-30岁人群'
        },
        {
          value: '30-40岁人群',
          label: '30-40岁人群'
        },
        {
          value: '40-50岁人群',
          label: '40-50岁人群'
        },
        {
          value: '50-60岁人群',
          label: '50-60岁人群'
        }
      ],
      formItem: {},
      btnLoading: false,
      PlanList: []
    }
  },
  methods: {
    init () {
      getActivityPlanList().then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          this.PlanList = data.data.results
        } else {
          this.error(data)
        }
      })
    },
    saveHandle () {
      const param = {
        id: this.formItem.id,
        plan_id: this.formItem.plan_id,
        activity_time: this.$common.xeUtils.toDateString(this.formItem.activity_time),
        activity_place: this.formItem.activity_place,
        activity_object: this.formItem.activity_object.join(','),
        emergency_measure: this.formItem.emergency_measure,
        activity_flow: this.formItem.activity_flow
      }
      addEditActivityPlanning(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.success()
          this.$emit('saveHandle')
        } else {
          this.error(data)
          this.btnLoading = false
        }
      })
      this.$emit('saveHandle')
    },
    cancel () {
      this.$emit('cancel')
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '添加成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.init()
  },
  watch: {
    formData (val) {
      this.formItem.activity_theme = val.activity_theme
    }
  }
}
</script>

<style scoped>
  /deep/ .ivu-modal-header {
    border-bottom: none;
  }

  .timeStyle /deep/ .ivu-input {
    width: 100%;
  }

  /deep/ .ivu-modal-footer {
    border-top: none;
  }

  /deep/ .ivu-input {
    width: 80%;
  }

  /deep/ .ivu-select {
    width: 80%;
  }
</style>
